<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        size="small"
        v-if="~accessable.indexOf('wechat:template_manager_add')"
        type="primary"
        v-waves
        icon="el-icon-plus"
        @click="handleUpdate(null)"
      >添加配置</el-button>
      <el-select v-model="filters.type" size="small">
        <el-option
          v-for="item in allTemplateTypes"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
    </div>
    <el-table
      :height="tableHeight"
      :data="list"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="templateType" align="center" label="模板消息类型" width="200">
        <template slot-scope="scope">
          <span>{{templateTypeName(scope.row.templateType)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="url" align="center" label="模板消息链接" width="220">
        <template slot-scope="scope">
          <span>{{scope.row.url}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="miniproAppid" align="center" label="小程序APPID" width="120"></el-table-column>
      <el-table-column prop="miniproPagePath" align="center" label="小程序页面路径" width="140"></el-table-column>
      <el-table-column prop="remark" align="center" label="消息备注" width="220">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间" width="220">
        <template slot-scope="scope">
          <span>{{scope.row.createTime|parseTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="modifyTime" align="center" label="修改时间" width="220">
        <template slot-scope="scope">
          <span>{{scope.row.modifyTime|parseTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200" class-name="small-padding">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            v-if="~accessable.indexOf('wechat:template_manager_modify')"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="~accessable.indexOf('wechat:template_manager_remove')"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :title="isEditing?'修改配置':'添加配置'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="模板消息类型" prop="templateType">
          <el-select v-model="temp.templateType">
            <el-option
              v-for="item in allTemplateTypes"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板消息链接" prop="url">
          <el-input v-model="temp.url" placeholder="模板消息链接"></el-input>
        </el-form-item>
        <el-form-item label="小程序APPID" prop="url">
          <el-input v-model="temp.miniproAppid" placeholder="小程序APPID"></el-input>
        </el-form-item>
        <el-form-item label="小程序页面地址" prop="url">
          <el-input v-model="temp.miniproPagePath" placeholder="小程序页面地址"></el-input>
        </el-form-item>
        <el-form-item label="消息备注" prop="remark">
          <el-input v-model="temp.remark" placeholder="消息备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableHeight: 0,
      allTemplateTypes: [],
      total: 0,
      temp: {
        id: '',
        templateType: '',
        url: '',
        remark: '',
        miniproAppid: '',
        miniproPagePath: ''
      },

      rules: {
        templateType: [
          {
            required: true,
            message: '模板类型不能为空',
            trigger: 'change',
            type: 'number'
          }
        ]
      }
    }
  },
  created () {
    this.$get('/admin/template_settings/template_type_list').then(data => {
      this.allTemplateTypes = data
    })
    this.init('template_settings', 1).loadData()
    this.setFilterAsPostParam()
    this.tableHeight = window.innerHeight - 300
  },
  methods: {
    templateTypeName (typeid) {
      let item = this.allTemplateTypes.filter(el => el.id == typeid)[0]
      if (item) {
        return item.name
      }
      return '';
    }
  }
}
</script>
